<script setup lang="ts">
import { reactive, ref } from 'vue'
import {
  ElDialog,
  ElInput,
  ElButton,
  ElForm,
  ElRow,
  ElCol,
  ElFormItem,
  ElTooltip,
  ElSelect,
  ElOption,
  FormInstance
} from 'element-plus'
import { Menu } from '@/api/menu/types'
import { saveMenuApi, updateMenuApi } from '@/api/menu'
import { Setting, Folder } from '@element-plus/icons-vue'

const form = reactive({
  id: '',
  name: '',
  path: '',
  component: '',
  sort: 0,
  pid: 0,
  pname: '',
  icon: '',
  status: 1,
  remark: ''
})

const dialogVisibleValue = ref(false)

const rules = reactive({
  name: {
    required: true,
    message: '不能为空',
    trigger: 'blur'
  }
})

const formRef = ref<FormInstance>()

const onSubmit = async (formEl: FormInstance | undefined) => {
  console.log(form)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    console.log(fields)
    if (valid) {
      if (form.id) {
        updateMenuApi(form)
      } else {
        saveMenuApi(form)
      }
      dialogVisibleValue.value = false
    }
  })
}

const onAdd = (value: boolean) => {
  dialogVisibleValue.value = value
  form.id = ''
  form.name = ''
  form.path = ''
  form.component = ''
  form.sort = 1
  form.pid = 1
  form.pname = ''
  form.icon = ''
  form.status = 1
  form.remark = ''
}

const onUpdate = (value: boolean, data: Menu) => {
  dialogVisibleValue.value = value
  form.id = data.id + ''
  form.name = data.name
  form.path = data.path
  form.component = data.component + ''
  form.sort = data.sort
  form.pid = data.pid
  form.pname = 'aaa'
  form.icon = data.icon
  form.status = data.status
  form.remark = data.remark
}

defineExpose({
  onSubmit,
  onAdd,
  onUpdate
})

const emit = defineEmits(['onClose'])

const onOpen = () => {}
const onOpened = () => {}
const onClose = () => {}
const onClosed = () => {
  emit('onClose', 'aaa', 'bbb')
}
</script>

<template>
  <el-dialog
    v-model="dialogVisibleValue"
    title="菜单信息"
    width="600"
    :draggable="true"
    :close-on-click-modal="false"
    @open="onOpen"
    @opend="onOpened"
    @close="onClose"
    @closed="onClosed"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="auto" label-position="top">
      <el-row :gutter="20">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="父级" prop="pname">
              <el-input v-model="form.pname" disabled autocomplete="off">
                <template v-slot:append>
                  <el-button icon="el-icon-search" @click="onClose" />
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地址" prop="path">
              <el-input v-model="form.path" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="组件地址" prop="component">
              <el-input v-model="form.component" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <template v-slot:label>
                <label>
                  图标
                  <el-tooltip v-if="form.icon != ''" class="item" placement="right" effect="light">
                    <template v-slot:content>
                      <div>
                        <i :class="form.icon"></i>
                      </div>
                    </template>
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </label>
              </template>
              <el-select
                v-model="form.icon"
                placeholder="请选择"
                filterable
                allow-create
                default-first-option
              >
                <el-option label="el-icon-setting" value="el-icon-setting">
                  <Setting />
                </el-option>
                <el-option label="el-icon-folder" value="el-icon-folder">
                  <Folder />
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="顺序" prop="sort">
              <el-input v-model="form.sort" maxlength="6" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态" prop="status">
              <el-select
                v-model="form.status"
                placeholder="请选择"
                filterable
                allow-create
                default-first-option
              >
                <el-option label="启用" :value="1" />
                <el-option label="禁用" :value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" maxlength="255" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-form-item>
            <el-button type="primary" @click="onSubmit(formRef)">保存</el-button>
            <el-button @click="dialogVisibleValue = false">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
